import React from 'react'
import Logo from '../../component/logo/logo'
import { List, InputItem, WhiteSpace, WingBlank, Button } from 'antd-mobile'
import { login } from '../../redux/user.redux'
import { connect } from 'react-redux'
import highFrom from '../../component/imooc-form/imooc-form'

@connect(
  state => state.user,
  { login }
)
@highFrom
class Login extends React.Component {
  // constructor () {
  //   super()
    // this.state = {
    //   user: '',
    //   pwd: ''
    // }
  // }
  register () {
    this.props.history.push('/register')
  }
  // 由 imoocFrom 高阶组件传入
  // handleChange (key, value) {
  //   this.setState({
  //     [key]: value
  //   })
  // }
  handleLogin () {
    this.props.login(this.props.state)
  }
  componentDidUpdate (prevProps) {
    if (this.props.redirectTo) {
      this.props.history.push(this.props.redirectTo)
    }
  }
  render () {
    // console.log(this.props)
    return (
      <div>
        <Logo />
        <WingBlank>
          {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
          <List>
            <InputItem onChange={v => this.props.handleChange('user', v)} placeholder='username'>用户名</InputItem>
            <InputItem onChange={v => this.props.handleChange('pwd', v)} type='password' placeholder='password'>密码</InputItem>
          </List>
          <WhiteSpace />
          <Button onClick={this.handleLogin.bind(this)} type='primary'>登录</Button>
          <WhiteSpace />
          <Button onClick={this.register.bind(this)} type='primary'>去注册</Button>
        </WingBlank>
      </div>
    )
  }
}

export default Login